<template>
  <div class="content">
    <div class="echarts_box">
      <EChartsLine ref="orderline1" :eChartsForm="eChartsForm1" />
      <EChartsLine ref="orderline2" :eChartsForm="eChartsForm2" />
      <EChartsLine ref="orderline3" :eChartsForm="eChartsForm3" />
      <EChartsLine ref="orderline4" :eChartsForm="eChartsForm4" />
    </div>
    <div class="con">
      <div class="tab_bar">
        <div v-for="(item, index) in tabList" :class="{ is_active: item.active }" :key="index" class="tabs"
          @click="tabClick(item, index)">
          {{ item.label }}
        </div>
      </div>
      <div class="search_bar">
        <el-date-picker class="time" v-model="timeValue" @change="changeTime" type="daterange"
          start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false">
        </el-date-picker>
        <div class="search_select">
          <el-button size="mini" type="primary">
            出现天数
          </el-button>
          <el-input placeholder="最小天数" v-model="searchData.minDay" style="margin-right: 10px;"></el-input>
          <el-input placeholder="最大天数" v-model="searchData.maxDay"></el-input>
        </div>
        <!-- <div class="search_select">
          <el-button size="mini" type="primary">
            实名
          </el-button>
          <el-select size="mini" v-model="value2" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search_select">
          <el-button size="mini" type="primary">
            住址
          </el-button>
          <el-select size="mini" v-model="value3" placeholder="请选择">
            <el-option v-for="item in addressList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div> -->
        <div class="search_select">
          <el-button size="mini" type="primary">
            排序
          </el-button>
          <el-select size="mini" v-model="searchData.order" @change="changeSort()" placeholder="请选择">
            <el-option v-for="(item,index) in sortList" :key="index" :label="item.label" :value="item.sort">
            </el-option>
          </el-select>
        </div>
        <!-- <div class="search_select">
          <el-button size="mini" type="primary">
            标签类型
          </el-button>
          <el-select size="mini" v-model="value5" placeholder="请选择">
            <el-option v-for="item in tipList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div> -->
        <div class="search_btn">
          <el-button size="mini" @click="searchCardList">搜索</el-button>
          <!-- <el-button size="mini" :disabled="true">导出</el-button> -->
        </div>
      </div>
      <div class="cards">
        <el-card class="box-card" v-for="(item, index) in cardList" :key="index">
          <div class="box-card_border">
            <i class="el-icon-circle-plus-outline" @click="addTabsClick(item)"></i>
            <div class="box-card_top">
              <div class="card_left">
                <el-image :src="'/httpImage/' + item.personPicUrl" fit="cover">
                </el-image>
                <p>{{ item.labels }}</p>
              </div>
              <div class="card_right">
                <div class="particulars"><img src="@/assets/images/particulars.jpg" alt=""> 详情</div>
                <h3>{{ item.daysAppeared || "--" }}天</h3>
                <!-- <h3>{{ item }} %</h3> -->
                <h4>档案编号: {{ item.id || "--" }} </h4>
                <p>住址: {{ item.community || "--" }}</p>
                <p>出现地点: {{ item.lastLocation || "--" }}</p>
                <p>出现时间: {{ item.lastAppearanceTime || "--" }}</p>
                <!-- <p>{{ item }}</p> -->
              </div>
            </div>

            <!-- <div class="box-card_bottom">
              <el-button style="color: #fff" size="mini" type="text"><i class="el-icon-s-claim"></i>详情</el-button>
              |
              <el-button style="color: #fff" size="mini" type="text"><i class="el-icon-s-claim"></i>收藏</el-button>
              |
              <el-button style="color: #fff" size="mini" type="text"><i class="el-icon-s-claim"></i>查找此人</el-button>
              |
              <el-button style="color: #fff" size="mini" type="text"><i class="el-icon-s-claim"></i>加入底库</el-button>
            </div> -->
          </div>
        </el-card>
      </div>
    </div>
    <div class="btn-pager">
      <PagerView class="page" layout="sizes, prev, pager, next" :pager-options="productPagerOptions"
        :pageSizes="productPagerOptions.pageSizeOption" @current-change="currentProductHandler"
        @size-change="productChangeHandler" />
    </div>
    <SetTabsDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
  </div>
</template>

<script>

import * as echarts from 'echarts'
// import EChartsLine  from "@/views/residentManage/residentAnalyse/components/eChartsLine.vue"
import EChartsLine from "./components/cChartsLine.vue"
import SetTabsDialog from "./components/setTabsDialog.vue"
import {
  statistics,
  compare,
  listByCondition,
  addConfig,
} from "@/api/residentManage/residentManage"
export default {
  name: "ResidentAnalyse",
  props: {

  },
  components: {
    EChartsLine,
    SetTabsDialog,
  },
  data() {
    return {
      //echarts实例
      chart1: null,
      chart2: null,
      chart3: null,
      options: [{
        value: '1',
        label: '已实名'
      }, {
        value: '2',
        label: '未实名'
      }],
      addressList: [{
        value: '1',
        label: '惠济区'
      }, {
        value: '2',
        label: '金水区'
      }, {
        value: '3',
        label: '中原区'
      }],
      sortList: [
        {
          label: "按时间正序",
          sort: true
        },
        {
          label: "按时间倒序",
          sort: false
        }
      ],
      tipList: [{
        value: '1',
        label: '陌生人'
      }, {
        value: '2',
        label: '昼伏夜出'
      }, {
        value: '3',
        label: '嫌疑人员'
      }, {
        value: '4',
        label: '跟踪人员'
      }, {
        value: '5',
        label: '外来务工人员'
      }, {
        value: '6',
        label: '闲散人员'
      }],
      timeValue: [
        this.$moment(new Date()).subtract(1, "months").format("YYYY-MM-DD HH:mm:ss"),
        this.$moment().format("YYYY-MM-DD HH:mm:ss")
      ],
      // 搜素条件
      searchData: {
        startDate:"",
        endDate:"",
        // order: "asc",
        order: true,
        minDay: 1,
        maxDay: 10,
        personalStatus: "stranger"
      },

      value: '',
      value2: '',
      value3: '',
      value4: '',
      value5: '',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      eChartsForm1: {
        title: "常住人口统计",
        visible: true,
        infomation: {
          dynamicWidth: 414,
          tabs: ["陌生人", "访客", "住户", "常住人口比例"],
          series: [
            {
              name: '陌生人',
              itemStyle: {
                // 普通样式。
                normal: {
                  // 点的颜色。
                  color: '#F7BD47'
                },
                // 高亮样式。
                emphasis: {
                  // 高亮时点的颜色。
                  color: '#07B9B9 '
                }
              },
              label: {
              },
              // symbol: 'none',
              data: [
                20, 25, 27, 34, 38, 80, 210,
              ],
              type: 'line',
              smooth: true,
            },
            {
              name: '访客',
              color: '#1AFF0E',
              // symbol: 'none',
              data: [
                15, 32, 78, 30, 45, 14, 54,
              ],
              type: 'line',
              smooth: true,
            },
            {
              name: '住户',
              color: '#1AFF0E',
              // symbol: 'none',
              data: [
                88, 12, 88, 20, 25, 84, 24,
              ],
              type: 'line',
              smooth: true,
            },
            {
              name: '常住人口比例',
              // symbol: 'none',
              color: "#83BFFF",
              data: [
                20, 50, 80, 10, 15, 75, 30,
              ],
              type: 'line',
              smooth: true,
            },
          ],

          templateId: '',
        },
      },
      eChartsForm2: {
        title: "陌生人统计",
        visible: true,
        infomation: {
          dynamicWidth: 414,
          series: [
            {
              name: '陌生人',
              // symbol: 'none',
              data: [
                20, 25, 27, 34, 38, 80, 90, 99, 30, 40, 54, 36,
              ],
              type: 'line',
              smooth: true,
            },
            {
              name: '住户',
              // symbol: 'none',
              data: [
                98, 88, 88, 45, 35, 80, 74, 38, 97, 30, 75, 90,
              ],
              type: 'line',
              smooth: true,
            },
            {
              name: '陌生人占比',
              // symbol: 'none',
              data: [
                88, 12, 88, 20, 25, 84, 24, 48, 87, 30, 25, 90,
              ],
              type: 'line',
              smooth: true,
            },
          ],
          templateId: ''
        },
      },
      eChartsForm3: {
        title: "来访统计",
        visible: true,
        infomation: {
          dynamicWidth: 414,
          series: [
            {
              name: '访客',
              // symbol: 'none',
              data: [
                20, 25, 27, 34, 38, 80, 90, 99, 30, 40, 54, 36,
              ],
              type: 'line',
              smooth: true,
            },
            {
              name: '陌生人',
              // symbol: 'none',
              data: [
                88, 12, 88, 20, 25, 84, 24, 48, 87, 30, 25, 90,
              ],
              type: 'line',
              smooth: true,
            },
          ],
          templateId: ''
        },
      },
      eChartsForm4: {
        // title:"常住人口统计",
        visible: false,
        infomation: {
          dynamicWidth: 341,
          statisticalData: [
            {
              personalStatus: "zh", //住户
              lastMonthCount: 82,
              monthCount: 100,
              percent: 82
            },
            {
              personalStatus: "msr", //常住人口
              lastMonthCount: 82, //上月数量
              monthCount: 100, //本月数量
              percent: 82 //百分比
            },
          ],
          //   templateId:''
        },
      },
      editConfig: {
        visible: false,
        infomation: [],
        personIndex: 0,
        currentId: "",
        isLookImg: false,
        tabs: [],
      },
      tabList: [
        { label: '陌生人', active: true, personalStatus: "stranger" },
        { label: '访客', active: false, personalStatus: "visitor" },
        { label: '住户', active: false, personalStatus: "resident" },
        { label: '常住人口', active: false, personalStatus: "permanent_resident" },
      ],
      productPagerOptions: {
        currPage: 1,
        pageSize: 10,
        totalCount: 0,
      },
      startDate: null,
      endDate: null,
      cardList: []
    };
  },
  computed: {

  },
  created() {
    this.statistics({
      list: []
    })
    this.compare()
    this.listByCondition({
      page: this.productPagerOptions.currPage,
      pageSize: this.productPagerOptions.pageSize,
      startDate:this.timeValue[0],
      endDate:this.timeValue[1],
      order: this.searchData.order,
      minDay:Number(this.searchData.minDay),
      maxDay:Number(this.searchData.maxDay),
      personalStatus: this.searchData.personalStatus,
    })
    this.getDateInit()
    this.addConfig({

    })
  },
  mounted() {
    this.chart1 = this.$refs.orderline1.$refs.orderline
    this.chart2 = this.$refs.orderline2.$refs.orderline
    this.chart3 = this.$refs.orderline3.$refs.orderline
    this.getOrderLine(this.$refs.orderline1.$refs.orderline, 1)
    this.getOrderLine(this.$refs.orderline2.$refs.orderline, 2)
    this.getOrderLine(this.$refs.orderline3.$refs.orderline, 3)
    this.getOrderLine('', 4)
  },
  watch: {

  },
  methods: {
    changeTime() {
      console.log(this.timeValue, "看看时间")
    },
    getOrderLine(ref, eChartsForm, xAxisDays) {
      if (ref) {
        let myChart = echarts.init(ref)
        let series = []
        if (eChartsForm === 1) {
          series = this.eChartsForm1.infomation.series
        } else if (eChartsForm === 2) {
          series = this.eChartsForm2.infomation.series
        } else if (eChartsForm === 3) {
          series = this.eChartsForm3.infomation.series
        } else if (eChartsForm === 4) {
          console.log("4")
        }
        myChart.setOption(
          {
            // title: {
            //   text: '常住人口统计'
            // },
            legend: {
              textStyle: {
                color: "#fff" // 设置标签的字体颜色
              }
            },
            xAxis: {
              type: 'category',
              data: xAxisDays,
              boundaryGap: false,
              nameTextStyle: {
                color: '#fff',
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#66FFFF',
                  type: "solid",//设置坐标轴为实线
                },
              },

              axisLabel: {
                interval: 0,
                textStyle: {
                  color: 'rgba(255, 255, 255, 1)',
                  fontSize: '12',
                  formatter: '{value}%',
                },
              },
            },
            yAxis: [
              {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    type: 'dashed',//设置刻度线条为虚线
                    width: 1,
                    color: 'rgba(255,255,255,0.1)'
                  },
                  show: true,
                },
                axisLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  interval: 0,
                  formatter: '{value}%',
                  textStyle: {
                    color: 'rgba(255, 255, 255, 1)',
                    fontSize: '12',
                  },
                },
              },
              {
                type: 'value',
                axisLine: {
                  show: false,
                  lineStyle: {
                    color: '#5c5d89'
                  }
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: false
                },
                axisLabel: {
                  interval: 1,
                  textStyle: {
                    color: '#5c5d89'
                  }
                },
                name: '人数',
                min: 0,
                max: 500,
                position: 'right',
              },
            ],
            series: series,
            // series: [
            //   {
            //     name: '常住人口',
            //     // symbol: 'none',
            //     data: [
            //       202, 250, 270, 340, 380, 400, 388, 400, 450, 500, 400, 360,
            //     ],
            //     type: 'line',
            //     smooth: true,
            //   },
            //   {
            //     name: '住户',
            //     // symbol: 'none',
            //     data: [
            //       88, 122, 188, 200, 250, 240, 240, 248, 287, 300, 250, 310,
            //     ],
            //     type: 'line',
            //     smooth: true,
            //   },
            //   {
            //     name: '常住人口比率',
            //     // symbol: 'none',
            //     data: [
            //       20, 50, 80, 100, 150, 75, 30, 45, 30, 77, 88, 66,
            //     ],
            //     type: 'line',
            //     smooth: true,
            //   },
            // ],
            // 下拉框配置项  
            select: {
              type: 'single', // 类型为单选下拉框  
              dataIndex: 'name', // 数据项的索引，用于关联数据项和下拉框选项  
              show: true, // 是否显示下拉框  
              inRange: { // 下拉框选中时的样式配置  
                color: '#ff0000' // 选中项的颜色为红色  
              },
              // 下拉框选项列表  
              optionList: [
                { name: '直接访问' },
                { name: '邮件营销' },
                { name: '联盟广告' },
                { name: '视频广告' },
                { name: '搜索引擎' }
              ]
            }
          },
          true
        )

      }
    },
    addTabsClick(item) {
      this.editConfig.isLookImg = true
      this.editConfig.infomation = item
      this.editConfig.visible = true
      // let sanpObj = this.VideoPhotoData.cards[index].activeObject
      // this.editConfig.infomation = this.VideoPhotoData.cards
      // this.editConfig.currentId = sanpObj.id
      // this.editConfig.personIndex=index
      // this.editConfig.visible = true
    },
    // 点击标签
    tabClick(item) {
      // 样式重置
      this.tabList = this.tabList.map(tab => {
        if (tab.label === item.label) {
          tab.active = true;
        } else {
          tab.active = false;
        }
        return tab;
      });
      this.searchData.personalStatus = item.personalStatus
      this.listByCondition({
        page: this.productPagerOptions.currPage,
        pageSize: this.productPagerOptions.pageSize,
        startDate:this.timeValue[0],
        endDate:this.timeValue[1],
        order: this.searchData.order,
        minDay:Number(this.searchData.minDay),
        maxDay:Number(this.searchData.maxDay),
        personalStatus: this.searchData.personalStatus,
      })

    },
    // 分页前后跳转
    currentProductHandler(val) {
      this.productPagerOptions.currPage = val
      this.listByCondition({
        page: this.productPagerOptions.currPage,
        pageSize: this.productPagerOptions.pageSize,
        startDate:this.timeValue[0],
        endDate:this.timeValue[1],
        order: this.searchData.order,
        minDay:Number(this.searchData.minDay),
        maxDay:Number(this.searchData.maxDay),
        personalStatus: this.searchData.personalStatus,
      })
    },
    // 分页条目选择
    productChangeHandler(val) {
      this.productPagerOptions.pageSize = val
      this.listByCondition({
        page: this.productPagerOptions.currPage,
        pageSize: this.productPagerOptions.pageSize,
        startDate:this.timeValue[0],
        endDate:this.timeValue[1],
        order: this.searchData.order,
        minDay:Number(this.searchData.minDay),
        maxDay:Number(this.searchData.maxDay),
        personalStatus: this.searchData.personalStatus,
      })
    },
    // 获取折线图数据
    statistics(params) {
      //折线图1
      statistics(params).then((res) => {
        let arr = []
        res.data.map((item, index) => {
          // this.eChartsForm1.infomation.series[index].data=[]
          if (item.personalStatus === "stranger") {
            item.personalStatus = "陌生人"
          } else if (item.personalStatus === "visitor") {
            item.personalStatus = "访客"
          } else if (item.personalStatus === "resident") {
            item.personalStatus = "住户"
          } else if (item.personalStatus === "permanent_resident") {
            item.personalStatus = "常住人口"
          }
          let xAxisDays = []
          res.data[0].list.forEach((i) => {
            // this.eChartsForm1.infomation.series[index].data.push(i.percent)
            xAxisDays.push(i.dayDate)
          })
          this.getOrderLine(this.chart1, 1, xAxisDays)
          // this.eChartsForm1.infomation.series[index].data=res.data[0].list
          arr.push(item.personalStatus)
          this.eChartsForm1.infomation.series[index].name = item.personalStatus
        })
        this.eChartsForm1.infomation.tabs = arr
        console.log(this.eChartsForm1.infomation, "this.eChartsForm1.infomation")

        // console.log(res, "折线图")
      })
    },
    // 统计数据
    compare() {
      compare().then((res) => {
        console.log(res, "res")
        if (res.data) {
          this.eChartsForm4.infomation.statisticalData = res.data
        }
      })
    },
    // 获取列表数据
    listByCondition(params) {
      listByCondition(params).then((res) => {
        res.data.data.map((item) => {
          item.lastAppearanceTime = this.timestampToDateTime(item.lastAppearanceTime)
          item.labels = item.labels.join("/");
        })
        this.productPagerOptions.totalCount=res.data.total
        this.cardList = res.data.data
      })
    },
    // 时间戳转换
    timestampToDateTime(timestamp) {
      let date = new Date(timestamp * 1000); //毫秒时间戳  
      let year = date.getFullYear();
      let month = (date.getMonth() + 1).toString().padStart(2, '0');
      let day = date.getDate().toString().padStart(2, '0');
      let hours = date.getHours().toString().padStart(2, '0');
      let minutes = date.getMinutes().toString().padStart(2, '0');
      // let seconds = date.getSeconds().toString().padStart(2, '0');   
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    getDateInit() {
      // 要求 默认一个月
      const end = new Date()
      const start = new Date()
      const nowDate = new Date()
      nowDate.setHours(0)
      nowDate.setMinutes(0)
      nowDate.setSeconds(0)
      nowDate.setMilliseconds(0)
      start.setTime(nowDate.getTime() - 3600 * 1000 * 24 * 30)
      end.setTime(nowDate.getTime() + 3600 * 1000 * 24 - 1)
      return [this.$moment(start).format("YYYY-MM-DD HH:mm:ss"), this.$moment(end).format("YYYY-MM-DD HH:mm:ss")]
    },
    format(array) {
      if (array.length === 0) {
        return []
      }
      return [
        this.$moment(array[0]).format("YYYY-MM-DD HH:mm:ss"),
        this.$moment(array[1]).format("YYYY-MM-DD HH:mm:ss")
      ]
    },
    // 添加标签
    addConfig(params) {
      addConfig(params).then((res) => {
        console.log(res, "添加标签")
      })
    },
    // 搜索
    searchCardList() {
      console.log(this.searchData,"搜索",this.timeValue)
      this.listByCondition({
        page: this.productPagerOptions.currPage,
        pageSize: this.productPagerOptions.pageSize,
        startDate: this.timeValue[0],
        endDate: this.timeValue[1],
        order: this.searchData.order,
        minDay:Number(this.searchData.minDay) ,
        maxDay: Number(this.searchData.maxDay),
        personalStatus: this.searchData.personalStatus,
      })
    },
    // 排序
    changeSort(){
      this.listByCondition({
        page: this.productPagerOptions.currPage,
        pageSize: this.productPagerOptions.pageSize,
        startDate: this.timeValue[0],
        endDate: this.timeValue[1],
        order: this.searchData.order,
        minDay:Number(this.searchData.minDay),
        maxDay:Number(this.searchData.maxDay),
        personalStatus: this.searchData.personalStatus,
      })
    }

  },
};
</script>

<style scoped lang="scss">
.content {
  margin-right: 20px;

  .echarts_box {
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
  }

  .tab_bar {
    margin-top: 30px;
    background: #00000A;
    box-sizing: border-box;
    border-bottom: 2px solid #0E9CFF;
    display: flex;

    .tabs {
      width: 153px;
      height: 43px;
      background-image: url("@/assets/images/residenManage/tabs.png");
      background-size: cover;
      /* 使背景图像完全覆盖元素 */
      background-position: center;
      /* 将图像居中放置 */
      text-align: center;
      line-height: 43px;
      margin-right: 15px;
      font-size: 16px;
      cursor: pointer;
    }

    .is_active {
      background-image: url("@/assets/images/residenManage/tabs1.png");
    }

    .no_active {
      background-image: url("@/assets/images/residenManage/tabs.png");
    }
  }

  .search_bar {
    margin: 20px 0px;
    display: flex;
    align-items: center;
    height: calc(100% - 50px);

    .el-select {
      // margin-left: 10px;
    }

    .search_select {
      margin-left: 10px;

      .el-input {
        width: 100px;
      }

      .el-button {
        // border-radius:0px;
        border-radius: 6px 0 0 6px;
      }

      .el-input__inner {
        height: 25px !important;
        border-radius: 0px !important;
      }

      .el-select {
        border-radius: 0px;

        .el-input {
          border-radius: 0px;

        }
      }
    }

    .search_btn {
      .el-button {
        width: 100px;
        // height: 40px;
        margin-left: 10px;
        border-radius: 50px;
        opacity: 1;
        background: rgba(10, 26, 52, 0.6);
        border: 1px solid rgba(89, 175, 249, 0.7049);
        box-shadow: inset 0px 0px 5px 0.5px rgba(3, 251, 255, 0.6513);
        color: rgba(255, 255, 255, 0.9)
      }

      .el-button:hover {
        color: #01C2FF;
      }
    }

  }

  .cards {
    width: 100%;
    height: 412px;
    overflow-y: auto;
    // height: calc(100% - 500px);
    margin-top: 20px;
    display: flex !important;
    flex-wrap: wrap;

    .box-card {
      .box-card_border {
        width: 100%;
        height: 100%;
        border-radius: 10px;
        position: relative;

        .el-icon-circle-plus-outline {
          position: absolute;
          bottom: 10px;
          right: 10px;
          font-size: 24px;
          z-index: 80;
        }

        .box-card_top {
          width: 100%;
          height: 80%;

          .card_left {
            width: 40%;
            height: 130px;
            position: relative;

            .el-image {
              width: 130px;
              height: 130px;
              border-radius: 26px;
            }

            p {
              width: 130px;
              height: 20px;
              background: rgba(21, 21, 21, 0.5);
              position: absolute;
              bottom: 0;
              left: 0;
              margin: 0;
              text-align: center;
              border-bottom-left-radius: 26px;
              border-bottom-right-radius: 26px;
              font-family: AlibabaPuHuiTi;
              font-size: 12px;
              font-weight: normal;
              line-height: 20px;
            }
          }

          .comparison_card_left {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;

            .snap-image-box {
              display: flex;
              position: relative;
              margin-bottom: 30px;

              .img-right,
              .img-left {
                width: 100px;
                height: 80px;
              }

              .img-right {
                margin-left: 0px;
              }

              .radio-view {
                position: absolute;
                left: calc(50% - 45px);
                bottom: 0px;
                width: 80px;
                height: 28px;
                line-height: 28px;
                border-radius: 6px;
                background: #008000;
                font-size: 16px;
                text-align: center;
              }
            }
          }

          .card_right {
            width: 60%;
            position: relative;

            .particulars {
              position: absolute;
              top: 0;
              right: 5px;
              display: flex;
              align-items: center;
              font-size: 12px;

              img {
                width: 10px;
                height: 14px;
                margin-right: 5px;
              }
            }

            h3 {
              margin: 5px;
              font-size: 16px;
              font-family: AlibabaPuHuiTi;
              font-size: 20px;
              font-weight: bold;
              line-height: 24px;
              color: #FF0101;
            }

            h4 {
              margin: 5px;
              font-family: AlibabaPuHuiTi;
              font-size: 12px;
              font-weight: bold;
              line-height: 22px;
              color: #FFFFFF;
              width: 13em;
              white-space: nowrap;
              // overflow: hidden;
              // text-overflow: ellipsis;

            }

            p {
              font-size: 12px;
              margin: 5px;
              color: #ccc;
            }
          }
        }

        .box-card_bottom {
          box-sizing: border-box;
          padding: 0px 5px 0px 5px;
          border-top: 1.5px solid #ccc;
          height: 30px;
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: normal;
          line-height: 20px;
          letter-spacing: 0px;
          color: #ffffff;
          z-index: 2;

          .el-button {
            font-family: PingFang SC;
            color: #ffffff !important;

            span {
              i {
                padding-right: 10px;
              }
            }
          }
        }
      }
    }
  }

}

::v-deep {
  .el-date-picker {
    background: #1F2935;
  }

  .el-button {
    height: 35px;
  }

  .search_bar {
    .el-input__inner {
      background: #1F2935;
      border: none;
      height: 35px;
      border-radius: 0 6px 6px 0;
    }

  }

  .el-range-input {
    background: #1F2935;
  }

  // .el-picker-panel__body{
  //   background: #1F2935 !important;
  // }
  // .el-picker-panel__content{
  //   background: #1F2935 !important;
  // }
  .el-card {
    background-color: #1c2a42;
    color: #fff;
    width: 382px;
    box-sizing: border-box;
    display: flex;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    height: 156px;
    border: 3px solid transparent;
    box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
    cursor: pointer;

    .box-card_border {
      width: 100%;
      height: 100%;
      border-radius: 10px;

      .box-card_top {
        width: 100%;
        height: 100%;

        .card_left {
          width: 40%;

          .el-image {
            width: 100px;
            height: 100px;
          }
        }

        .comparison_card_left {
          display: flex;
          flex-direction: column;
          justify-content: flex-end;

          .snap-image-box {
            display: flex;
            position: relative;
            margin-bottom: 30px;

            .img-right,
            .img-left {
              width: 100px;
              height: 80px;
            }

            .img-right {
              margin-left: 0px;
            }

            .radio-view {
              position: absolute;
              left: calc(50% - 45px);
              bottom: 0px;
              width: 80px;
              height: 28px;
              line-height: 28px;
              border-radius: 6px;
              background: #008000;
              font-size: 16px;
              text-align: center;
            }
          }
        }

        .card_right {
          width: 60%;

          h3 {
            margin: 5px;
            font-size: 16px;
          }

          h4 {
            margin: 5px;
            font-size: 14px;
          }

          p {
            font-size: 12px;
            margin: 5px;
            color: #ccc;
          }
        }
      }

      .box-card_bottom {
        box-sizing: border-box;
        padding: 0px 5px 0px 5px;
        border-top: 1.5px solid #ccc;
        height: 30px;
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: normal;
        line-height: 20px;
        letter-spacing: 0px;
        color: #ffffff;
        z-index: 2;

        .el-button {
          font-family: PingFang SC;
          color: #ffffff !important;

          span {
            i {
              padding-right: 10px;
            }
          }
        }
      }
    }
  }

  .el-card:hover {
    border: 3px solid #33fefe;
    box-shadow: inset 0px 1px 15px 0px rgba(3, 251, 255, 0.6);
  }

  .el-card__body {
    width: 100%;
    padding: 10px 10px 0px 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;

    .box-card_top {
      width: 100%;
      display: flex;

      .card_left {
        width: 45%;
      }

      .comparison_card_left {
        width: 60%;
      }

      .card_right {
        width: 55%;
      }
    }

    .box-card_bottom {
      width: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
}

.btn-pager {
  width: calc(100% - 40px);
  justify-content: left;
  position: relative;
}
</style>
